<template>
  <header
    id="header"
    class="app-header navbar "
    :class="headerColor"
    role="menu"
  >
    <!-- navbar header -->
    <div
      class="navbar-header ng-scope "
      :class="boxShadow"
    >
      <button class="pull-right visible-xs">
        <i class="ti-settings"></i>
      </button>
      <button class="pull-right visible-xs">
        <i class="ti-menu"></i>
      </button>
      <!-- brand -->
      <a
      @click="aClick()"
        class="navbar-brand text-lt ng-scope"
        bs-aside="aside"
        data-placement="top"
        data-animation="am-slide-top aside-open-backdrop"
        data-container="body"
      >
        <i class="pull-right ti-arrow-circle-down text-sm m-v-xs m-l-xs"></i>
        <i class="glyphicon glyphicon-th-large text-md" ></i>
        <img
          src="../../assets/images/logo.png"
          alt="."
          class="hide"
        >
        <span class="hidden-folded m-l-xs ng-binding">乌海及其周边地区污染源成因及其对策大数据分析系统<sup class="text-xs font-thin ng-binding">v1.2</sup></span>
      </a>
      <!-- / brand -->
    </div>
    <!-- / navbar header -->
    <!-- navbar collapse -->
    <div class="navbar-collapse hidden-xs ng-scope">
      <!-- nav -->
      <ul class="nav navbar-nav navbar-left">
        <template v-for="(item) in menus">
          <li
            v-if="item.id=='bd_01'"
            v-bind:key="item.id"
            class="active"
          ><a @click="oneMenuClick($event,item)">{{item.name}}
            </a> </li>
          <li
            v-else
            v-bind:key="item.id"
          ><a @click="oneMenuClick($event,item)">{{item.name}}
            </a> </li>

        </template>
      </ul>
      <!-- / nav -->

      <!-- nabar right -->
      <ul class="nav navbar-nav navbar-right m-r-n">
        <li>

          <a @click="settingclick">
            <i class="glyphicon glyphicon-cog"></i>
            <span class="visible-xs-inline">Settings</span>
          </a>
          <div
            tabindex="-1"
            class="p dropdown-menu bg-white bg-inherit no-b-t no-margin w-sm ng-scope bottom-left am-collapse"
            role="menu"
            v-bind:style="settingstyle"
            style="top: 48px; left: 0px; visibility: visible;"
          >
            <p class="clearfix">
              <!-- ngRepeat: color in options.headerColor -->
              <template v-for="(item) in headerColors">
                <a
                  v-bind:key="item"
                  class="inline p-xs m-h-xs m-v-xs pull-left no-borders"
                  :class="item"
                  @click="setHeaderColor(item)"
                >
                </a>
              </template>

            </p>
            <div class="line b-b b-light m-h-xs"></div>
            <p class="clearfix">
              <!-- ngRepeat: color in options.asideColor -->
              <template v-for="(item) in asideColors">
                <a
                  v-bind:key="item"
                  class="inline p-xs m-h-xs m-v-xs pull-left no-borders"
                  :class="item"
                  @click="setAsideColor(item)"
                >
                </a>
              </template>

            </p>
            <div class="line b-b b-light m-h-xs"></div>
            <div class="m-v-xs">
              <label class="ui-checks m-h-xs no-margin">

                <input
                  type="checkbox"
                  @change="headerFixedChange"
                  class="ng-pristine ng-valid"
                ><i></i> Header fixed
              </label>
            </div>
            <div class="m-v-xs">
              <label class="ui-checks m-h-xs no-margin">
                <input
                  type="checkbox"
                  @change="headerShadowChange"
                  class="ng-pristine ng-valid"
                ><i></i> Header Shadow
              </label>
            </div>
            <div class="m-v-xs">
              <label class="ui-checks m-h-xs no-margin">
                <input
                  type="checkbox"
                  @change="asideTopChange"
                  class="ng-pristine ng-valid"
                ><i></i> Aside top
              </label>
            </div>
          </div>
        </li>
        <li>
          <a
            href=""
            bs-aside="aside"
            data-template="views/partials/aside.tpl.chat.html"
            data-placement="right"
            data-animation="am-slide-right aside-open-inner modal-open"
            data-container="body"
            class="ng-scope"
          >
            <i class="glyphicon glyphicon-comment"></i>
            <b class="badge badge-xs bg-warning up">3</b>
            <span class="visible-xs-inline">Notifications</span>
          </a>
        </li>
        <li class="hidden-xs">
          <a
            href=""
            ui-fullscreen=""
            class=""
          ><i class="glyphicon glyphicon-resize-vertical"></i></a>
        </li>
        <li>
          <a
            @click="userInfoClick"
            class="clear no-padding-h ng-scope"
          >
            <img
              src="../../assets/images/a0.jpg"
              alt="..."
              class="navbar-img pull-right"
            >
            <span class="hidden-sm m-l">{{this.userName}}</span>
            <b class="caret m-h-xs hidden-sm"></b>
          </a>
          <ul
            class="dropdown-menu pull-right no-b-t ng-scope bottom-left am-collapse"
            v-bind:style="uerinfostyle"
            style="top: 48px; left: 0px;visibility: visible;"
          >
            <li>
              <a ui-sref="page.profile">Profile</a>
            </li>
            <li>
              <a ui-sref="page.settings">Settings</a>
            </li>
            <li class="divider">
            <li>
              <a ui-sref="lockme">Lock me</a>
            </li>
            <li>
              <a ui-sref="signin">Logout</a>
            </li>
          </ul>

        </li>
      </ul>
      <!-- / navbar right -->

      <!-- search form -->
      <form
        class="navbar-form navbar-form-sm navbar-right visible-xs ng-pristine ng-valid"
        role="search"
      >
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-btn">
              <button
                type="submit"
                class="btn btn-sm no-bg btn-icon no-shadow no-padder"
              ><i class="ti-search"></i></button>
            </span>
            <input
              type="text"
              ng-model="selected"
              typeahead="state for state in states | filter:$viewValue | limitTo:8"
              class="form-control input-sm no-bg no-border ng-pristine ng-valid"
              placeholder="Search..."
            >
          </div>
        </div>
      </form>
      <!-- / search form -->
    </div>
    <!-- / navbar collapse -->
  </header>
</template>

<script>
//import * as menuOper from '../../scripts/menuOper.js';
import { mapActions } from 'vuex';
let config = require('../../config/config');
import Utils from '../../scripts/Utils';
import menuConfig from '../../config/menuConfg.js';
import commonOper from '../../scripts/commonOper';
export default {
  name: 'top_header',

  data() {
    return {
      msg: 'top_header',
      userName: '未登录',
      menus: menuConfig,
      active: 0,
      //用户信息的展开样式
      uerinfostyle: { display: 'none' },
      //设置面板展开的样式
      settingstyle: { display: 'none' },

      //标题阴影class
      boxShadow: '',
      //头的颜色
      headerColor: 'bg-primary',
      //头部颜色列表
      headerColors: [
        'bg-primary lt',
        'bg-primary ',
        'bg-primary dk',
        'bg-info lt',
        'bg-info',
        'bg-info dk',
        'bg-success lt',
        'bg-success ',
        'bg-success dk',
        'bg-inverse lt',
        'bg-inverse ',
        'bg-inverse dk',
        'bg-dark lt',
        'bg-dark',
        'bg-dark dk ',
        'bg-black ',
        'bg-black dk',
        'bg-white box-shadow-md'
      ],

      asideColors: [
        'bg-primary dk',
        'bg-info dk',
        'bg-success dk',
        'bg-dark lt',
        'bg-dark',
        'bg-dark dk',
        'bg-black lt',
        'bg-black',
        'bg-black dk',
        'bg-white',
        'bg-light',
        'bg-light dk'
      ]
    };
  },
  mounted() {
    //这里获取页面传过来的参数
    var storageID = Utils.getCookie('userName');
    this.userName = storageID == null ? '未登录' : storageID;
    
    //menuOper.init(this, storageID);
    if (storageID == null) {
      let params = {
        this: this,
        title: '提示',
        message: '用户未登录，请重新登录！',
        successFunc: function () {
          setTimeout(function () {
          /** 重新登录 */
            window.location.href=config.Login_URL;
          // that.$router.push("/login.html")
          }, 200);
        },
        failFunc:function(){
          setTimeout(function () {
          /** 重新登录 */
            window.location.href=config.Login_URL;
          // that.$router.push("/login.html")
          }, 200);
        }
      };
      commonOper.showWarnAlert(params);

    }
  },
  methods: {
    //设置用户点击事件，打开和关闭用户信息面板
    userInfoClick: function() {
      if (this.uerinfostyle.display == 'none') {
        this.uerinfostyle = { display: 'block' };
      } else {
        this.uerinfostyle = { display: 'none' };
      }
    },
    //设置按钮点击事件，打开和关闭设置面板
    settingclick: function() {
      if (this.settingstyle.display == 'none') {
        this.settingstyle = { display: 'block' };
      } else {
        this.settingstyle = { display: 'none' };
      }
    },
    aClick:function(){
      window.location.href=config.Data_URL;
    },
    editPassword: function() {
      //console.log('editPassword');
    },
    logout: function() {
      //console.log('logout');
    },
    item_click: function(index) {
      this.active = index;
    },
    //一级菜单点击事件
    oneMenuClick(event,item) {
      let chdlist=event.target.parentNode.parentNode.children;
      for ( let i = 0; i <chdlist.length; i++){
        chdlist[i].setAttribute('class','');
    
      }
      event.target.parentNode.setAttribute('class','active');
      this.changeCurrentmenu({currentmenu:item.name});
      this.$router.push({  //核心语句
        path:item.path,   //跳转的路径
      });
    },
    //设置头的颜色
    setHeaderColor(color) {
      this.headerColor = color;
      this.settingstyle = { display: 'none' };
    },
    //标题阴影设置
    headerShadowChange(e) {
      if (e.target.checked) {
        this.boxShadow = 'box-shadow-inset dk';
      } else {
        this.boxShadow = '';
      }
    },
    //设置菜单栏的颜色
    setAsideColor(color) {
      this.changeAslideColor({ asildeColor: color + ' ' });
      this.settingstyle = { display: 'none' };
    },
    asideTopChange(e) {
      if (e.target.checked) {
        this.changeAsideTop({ asideTop: '' });
      } else {
        this.changeAsideTop({ asideTop: 'app-aside-top ' });
      }
    },
    headerFixedChange(e) {
      if (e.target.checked) {
        this.changeHeaderFixed({ headerFixed: '' });
      } else {
        this.changeHeaderFixed({ headerFixed: 'app-header-fixed ' });
      }
    },
    ...mapActions(['changeCurrentmenu','changeAslideColor', 'changeHeaderFixed', 'changeAsideTop'])
  }
};
</script>
